$primary-color: #1890ff;
$primary-color: #1890ff;
$success-color: #52c41a;
$warning-color: #faad14;
$error-color: #ff4d4f;
$text-color: #333333;
$text-secondary: #666666;
$text-tertiary: #999999;
$bg-color: #f5f7fa;
$white: #ffffff;
$border-color: #e8e8e8;
$hover-bg: #f0f2f5;
$shadow-light: 0 2px 8px rgba(0, 0, 0, 0.08);
$shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.12);
$border-radius: 8px;
$transition: all 0.3s ease;
$table-row-height: 52px;
$btn-height: 36px;

// 主容器样式
.institution-management {
  padding: 20px;
  height: calc(100vh - 180px);
  display: flex;
  flex-direction: column;
  background-color: $bg-color; /* 灰蓝色背景 */

  // 内容容器
  .institution-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  // 搜索筛选区域样式
  .search-filter {
    margin-bottom: 20px;
    padding: 20px;
    background: $white;
    border-radius: $border-radius;
    box-shadow: $shadow-light;
    transition: $transition;

    // 输入框和选择框样式优化
    .ant-select-selector {
      border-radius: 6px; // 增加圆角使视觉更柔和
      transition: $transition;
      height: $btn-height; // 统一高度
      font-size: 14px; // 统一字体大小
      line-height: 1.5;
    }

    // 输入框优化
    .ant-input {
      padding: 4px 11px;
      background-color: $white;
      outline: none;
      height: 24px; // 统一高度
      line-height: 1.5;
      &:focus {
        outline: none;
        border-color: $primary-color;
      }
    }

    // 选择框优化
    .ant-select-selector {
      border: 1px solid $border-color;
      background-color: $white;
      padding: 0 11px;
      display: flex;
      align-items: center;
      outline: none;
    }

    // 确保选择框没有多余的阴影
    .ant-select {
      &.ant-select-focused {
        .ant-select-selector {
          box-shadow: none !important;
        }
      }
    }

    // 按钮样式优化
    .ant-btn {
      height: $btn-height;
      padding: 0 15px;
      border-radius: 6px;
      font-size: 14px;
      transition: $transition;
    }

    // 按钮间距样式
    .reset-button,
    .search-button,
    .advanced-search-button {
      margin-right: 8px;
    }
  }

  // 操作按钮区域样式
  .action-buttons {
    margin-bottom: 20px;
    padding: 16px 20px;
    background: $white;
    border-radius: $border-radius;
    box-shadow: $shadow-light;
    transition: $transition;

    .ant-btn {
      margin-right: 8px;
      height: $btn-height;
      padding: 0 15px;
      border-radius: 6px;
      transition: $transition;

      &:last-child {
        margin-right: 0;
      }

      &.ant-btn-primary {
        background-color: $primary-color;
        border-color: $primary-color;

        &:hover {
          background-color: #40a9ff;
          border-color: #40a9ff;
        }
      }
    }
  }

  // 组织机构表格区域样式
  .institution-table {
    flex: 1;
    background: $white;
    border-radius: $border-radius;
    box-shadow: $shadow-light;
    min-height: 0;
    overflow: hidden;
    transition: $transition;

    &:hover {
      box-shadow: $shadow-medium;
    }

    .ant-table-wrapper {
      min-height: 0;
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .ant-table {
      min-height: 0;
      flex: 1;
      display: flex;
      flex-direction: column;
      border-radius: $border-radius;
      overflow: hidden;

      .ant-table-container {
        min-height: 0;
        flex: 1;
        display: flex;
        flex-direction: column;

        .ant-table-content {
          min-height: 0;
          flex: 1;
          display: flex;
          flex-direction: column;

          .ant-table-body {
            overflow-y: auto;
            flex: 1;
            // 自定义滚动条样式
            &::-webkit-scrollbar {
              width: 6px;
            }
            &::-webkit-scrollbar-track {
              background: $bg-color;
              border-radius: 3px;
            }
            &::-webkit-scrollbar-thumb {
              background: $border-color;
              border-radius: 3px;
              &:hover {
                background: $text-tertiary;
              }
            }
          }

          // 表格头部样式美化
          .ant-table-thead > tr > th {
            background-color: #fafafa;
            font-weight: 600;
            color: $text-color;
            border-bottom: 1px solid $border-color;
            transition: $transition;

            &:hover {
              background-color: #f0f0f0;
            }
          }

          // 表格行样式美化
          .ant-table-tbody {
            > tr {
              transition: $transition;

              &:hover > td {
                background-color: $hover-bg;
              }

              > td {
                padding: 12px;
                border-bottom: 1px solid $border-color;
                transition: $transition;

                // 操作链接样式
                .edit-link {
                  color: $primary-color;
                  margin-right: 16px;
                  font-weight: 500;
                  transition: $transition;

                  &:hover {
                    color: #40a9ff;
                    text-decoration: underline;
                  }
                }

                .delete-link {
                  color: $error-color;
                  font-weight: 500;
                  transition: $transition;

                  &:hover {
                    color: #ff7875;
                    text-decoration: underline;
                  }
                }

                // 状态标签样式美化
                .ant-tag {
                  border-radius: 4px;
                  font-size: 12px;
                  padding: 2px 8px;
                }
              }
            }
          }
        }
      }
    }
  }

  // 分页区域样式
  .pagination {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: $white;
    border-radius: $border-radius;
    box-shadow: $shadow-light;
    transition: $transition;

    .ant-pagination {
      margin: 0;

      .ant-pagination-item {
        border-radius: 4px;
        transition: $transition;

        &:hover {
          border-color: $primary-color;
        }

        &.ant-pagination-item-active {
          background-color: $primary-color;
          border-color: $primary-color;
        }
      }
    }

    .total-count {
      color: $text-secondary;
      font-size: 14px;
    }
  }

  // 响应式设计
  @media (max-width: 1200px) {
    .search-filter .ant-col {
      margin-bottom: 12px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  @media (max-width: 768px) {
    padding: 12px;

    .search-filter,
    .action-buttons,
    .pagination {
      padding: 12px;
    }

    .action-buttons .ant-btn {
      margin-bottom: 8px;
    }

    .pagination {
      flex-direction: column;
      align-items: stretch;

      .total-count {
        margin-bottom: 12px;
        text-align: center;
      }
    }
  }
}
